<template>
  <div id="login">
    <div class="login_box">
      <div class="title">后台管理系统</div>
      <el-form :model="loginForm">
        <el-form-item>
          <el-input
            prefix-icon="iconfont icon-zhanghao"
            placeholder="请输入账号"
            type="text"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="iconfont icon-mima"
            placeholder="请输入密码"
            type="password"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        class="login_btn"
        type="primary"
        @click="onSubmit"
        @keydown="onSubmit"
        :loading="loading"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import { adminLoginFn } from "@/utils/login";
import { studentLoginFn } from "@/utils/login";
import { initRouter } from "@/router/index.js";
export default {
  name: "",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123",
      },
      // 数据
      list: [
        { username: "admin", password: "123" },
        { username: "student", password: "123" },
      ],
      // 登录加载样式
      loading: false,
    };
  },

  components: {},

  methods: {
    onSubmit() {
      this.loading = true;
      if (
        this.loginForm.username == "admin" &&
        this.loginForm.password == "123"
      ) {
        adminLoginFn().then((res) => {
          this.onSubmitSuccess(res, "admin");
        });
      } else if (
        this.loginForm.username == "student" &&
        this.loginForm.password == "123"
      ) {
        studentLoginFn().then((res) => {
          this.onSubmitSuccess(res, "student");
        });
      } else {
        this.$message({
          showClose: true,
          message: "账号或密码错误",
          type: "error",
        });
      }
    },
    // 登录成功
    onSubmitSuccess(res, user) {
      this.$message({
        showClose: true,
        message: "登录成功",
        type: "success",
      });
      sessionStorage.setItem("token", "token");
      sessionStorage.setItem("user", user);
      this.$store.commit("navDataFn", res);
      initRouter();
      this.$router.push({ path: "/index" });
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.onSubmit();
      }
    },
  },
  mounted() {
    //回车登录
    window.addEventListener("keydown", this.keyDown);
  },
  created() {
    // 登录页清除token与选中的侧导航数据
    sessionStorage.getItem("token") && sessionStorage.removeItem("token");
    sessionStorage.getItem("navData") && sessionStorage.removeItem("navData");
    sessionStorage.getItem("user") && sessionStorage.removeItem("user");
    sessionStorage.getItem("activeMenu") &&
      sessionStorage.removeItem("activeMenu");
  },
  destroyed() {
    // 销毁回车登录
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>

<style lang="scss" scoped>
#login {
  height: 100%;
  position: relative;
  .login_box {
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      margin: 0 auto 30px auto;
      text-align: center;
      color: #707070;
      font-size: 20px;
    }
    .login_btn {
      width: 100%;
    }
  }
}
</style>